<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变</title>
    <style>
        .box1{
            width:300px;
            height:300px;
/*第一遍理解记忆：2023-1-23*/
/*
1、概述：:径向渐变（放射性效果）
2、设置：radial-gradient(大小 at 位置,颜色 位置，颜色 位置，颜色 位置)
3、可选值：
（1）默认情况下，径向渐变的形状是根据元素的形状来计算  eg:正方形-->圆形、长方形-->椭圆形
（2）指定大小：ciecle(圆形)、ellipse(椭圆)、closest-side(近边)、closest-corner(近角)、farthest-side(远边)、farthest-corner(远角)
（3）指定位置：top、right、bottom、left、center*/
            background-image: radial-gradient(100px 100px at 0 0,red,#bfa);
            /* background-image: radial-gradient(100px 100px at center center,red,#bfa); */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>